<template>
  <border-box title="选题线索">
    <span slot="titleRight" @click="showClueModal">查看线索集</span>
    <div>
      <a-tag style="cursor: pointer;" @click="showDetail(item)" v-for="item in clues" :key="item.id">
        {{item.cluesTitle}}
      </a-tag>
    </div>
    <topic-clue-model ref="clueModal" :taskNo="params.taskNo" @updateClues="myUpdateClues"></topic-clue-model>
    <topic-clue-detail ref="clueDetail"></topic-clue-detail>
  </border-box>
</template>

<script>
  //选题线索
  import BorderBox from "../BorderBox";
  import TopicClueModel from "./TopicClueModel";
  import {getAction} from "@/api/manage";
  import TopicClueDetail from "./TopicClueDetail";

  export default {
    name: "TopicClue",
    components: {TopicClueDetail, TopicClueModel, BorderBox},
    props: ['params'],
    data() {
      return {
        clues: []
      }
    },
    created() {
      this.queryClues();
    },
    methods: {
      //查询选题线索
      queryClues() {
        getAction('task/taskInfo/queryTaskClueInfo', this.params).then(res => {
          if (res.success) {
            this.clues = res.result;
          }
        })
      },
      showClueModal() {
        let clueIds = [];
        if (this.clues) {
          clueIds = this.clues.map(item => item.id)
        }
        this.$refs.clueModal.show(clueIds);
      },
      myUpdateClues(clues) {
        this.$nextTick(() => {
          this.clues = clues;
          console.log(this.clues);
        })
      },
      showDetail(item) {
        this.$refs.clueDetail.show(item);
      }
    }
  }
</script>

<style scoped>


</style>